<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form :form="form" @submit="handleSubmit">

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="用户名"
        hasFeedback
      >
        <a-input
          placeholder="用户名"
          v-decorator="[ 'username', rules.username ]"
        ></a-input>
      </a-form-item>

      <a-form-item v-if="!isEdit"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="密码"
        hasFeedback
      >
        <a-input
          placeholder="密码"
          v-decorator="[ 'password', rules.password ]"
        ></a-input>
      </a-form-item>

      <a-form-item v-if="!isEdit"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="确认密码"
        hasFeedback
      >
        <a-input
          placeholder="确认密码"
          v-decorator="[ 'confirmpsd', rules.confirmpsd ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="姓名"
        hasFeedback
      >
        <a-input
          placeholder="姓名"
          v-decorator="[ 'name', rules.name ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="手机号"
        hasFeedback
      >
        <a-input
          placeholder="手机号"
          v-decorator="[ 'phone' ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="是否启用"
        hasFeedback
      >
        <a-select v-decorator="['isEnable', {rules: [{ required: true, message: '请选择状态' }], initialValue: 1}]">
          <a-select-option :value="1">启用</a-select-option>
          <a-select-option :value="0">禁用</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="角色"
        hasFeedback
      >
        <a-select mode="multiple" v-decorator="['roleIds', {rules: [{ required: true, message: '请选择角色' }]}]">
          <a-select-option 
            v-for="item in roles"
            :key="item.id"
            :value="item.id"
          > {{item.name}}
            </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="描述"
        hasFeedback
        help="请填写一段描述"
      >
        <a-textarea :rows="5" placeholder="..."  v-decorator="['remark']"/>
      </a-form-item>

      <a-form-item
        v-bind="buttonCol"
      >
        <a-row>
          <a-col span="6">
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-col>
          <a-col span="10">
            <a-button @click="handleGoBack">返回</a-button>
          </a-col>
          <a-col span="8"></a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import {saveWebUser, getWebUserDetail, getAllRole} from "../../api/auth";
import {validateConfirm, require, pattern} from '../../utils/rules';
import pick from 'lodash.pick'

export default {
  name: 'AdminUserDetail',
  data () {
    var validateConfirmPassword = (rule, value, callback) => validateConfirm(rule, value, callback, this.form.getFieldValue('password'), ['请再次填写确认密码', '两次密码不一致'])
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      buttonCol: {
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 5 }
        }

      },
      form: this.$form.createForm(this),
      id: 0,
      roles:[],
      isEdit: false,
      rules: {
        username: {rules:[require("请填写用户名"), pattern('^[a-zA-Z0-9\u4e00-\u9fa5]{3,40}$', '用户名为3-12位字母,数字或汉字')]},
        password: {rules:[require("请输入密码"), pattern('^[a-zA-Z0-9]{6,12}$', '请输入6到12位字母或数字')]},
        confirmpsd: {rules:[{validator: validateConfirmPassword ,required: true}]},
        name: {rules:[require("请填写姓名"), pattern('^[a-zA-Z\u4e00-\u9fa5]{2,40}$', '用户名为2-12位字母或汉字')]}
      },
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.loadRole()
      this.loadData()
    })
  },
  methods: {
    handleGoBack() {this.$router.push({name: 'AdminUserList'})},
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          let resp = await saveWebUser({
            adminUser: Object.assign({id: this.id},values) ,
            password: values.password,
            roleIds: values.roleIds
          })
          if (this.validResp(resp)) {
            this.$message.success(resp.msg);
            this.$router.push({name: 'AdminUserList'});
          }
        }
      })
    },
    async loadRole() {
      let resp = await getAllRole();
      if (resp.data != null) {
        this.roles = resp.data
      }
    },
    async loadData (data) {
      const { form } = this
      let id = this.$route.query.id || 0
      if (id > 0) {
        this.id  = id
        let resp = await getWebUserDetail({id: id})
        if (this.validResp(resp)) {
          // this.pageTitle = "编辑用户"
          this.isEdit = true
          // if (resp.data.adminUser != null) {
          //   this.roleIds = Object.assign({}, resp.data.adminUser.roleIds)
          // }
          let formData = pick(resp.data.adminUser, ['username','password','name','phone','isEnable','roleIds','remark',])
          // let formData = resp.data.adminUser
          form.setFieldsValue(formData)
        }
      } else {
        this.isEdit = false
      }
    }
  }
}
</script>
